<template>
  <div class="suggestionsBox">
    <!-- 选项栏 -->
    <header>
      <div class="return" @click="goback">
        <i class="iconfont icon-zuojiantou"></i>
      </div>
      <div class="title">投诉建议</div>
    </header>
    <van-tabs
      line-width="50%"
      class="tabs"
      v-model="active"
    >
      <div class="tabtext">
        <van-tab
          title="我要投诉"
          style="font-size: 16px; text-align: center"
        ></van-tab>
        <van-tab
          title="我有建议"
          style="font-size: 16px; text-align: center"
        ></van-tab>
      </div>
    </van-tabs>
    <div class="main">
        <h3>您要投诉的问题？</h3>
        <van-field v-model="text" label="请简要描述你遇到的问题：" class="problem" />
        <h3>你的联系方式：</h3>
        <van-field v-model="email" type="number" label="邮箱" placeholder=" " class="contact" />
        <van-field v-model="tel" type="tel" label="手机号" class="contact" />

        <div class="submit">
            提交
        </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: "",
      text: '',
      email: '',
      tel: ''
    };
  },
  methods: {
      goback() {

      }
  }
};
</script>

<style lang="less" scoped>
* {
    margin: 0;
    padding: 0;
}
/deep/ .suggestionsBox {
    font-size: 40px;
    /deep/ .tabtext {
        height: 60px;
        font-size: 40px;
    }
    .tabs {
        height: 60px;
    }
}
  header {
    width: 100%;
    height: 88px;
    background-color: #ff5654;
    display: flex;
    .return {
      margin-left: 20px;
      i {
        color: #fff;
        font-size: 34px;
        line-height: 88px;
      }
    }
    .title {
      padding: 0 250px;
      color: #fff;
      font-size: 36px;
      line-height: 88px;
    }
  }
  .main {     
    min-height: 1334px;
    background-color: #e6e6e6;
    padding-top: 50px;
    h3 {
        margin-left: 40px;
        font-size: 22px;
        font-weight: 400px;
    }
    /deep/.problem {
        margin: 20px;
        display: block;
        width: 710px;
        height: 260px;
        border-radius: 8px;
        padding: 6px 20px;
        margin-bottom: 40px;
        .van-field__label {
            width: 710px;
            margin-right: auto;
        }
    }
    /deep/.contact {
        margin: 20px;
        width: 710px;
        border-radius: 8px;
    }
    .submit {
        margin: 45px 135px;
        height: 80px;
        line-height: 80px;
        background-color: #ff5654;
        color: #fff;
        text-align: center;
        border-radius: 8px;
        font-size: 30px;
        letter-spacing: 4px;

    }
  }
</style>